<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>采购申请</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

</head>
<body>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <%--计划采购表--%><h1>仓库库存</h1>
        <%--  搜索行--%>
        <div class="demoTable">
            书名：
            <div class="layui-inline">
                <input class="layui-input" placeholder="请输入书名" name="bookname" id="bookname" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload" id="search">搜索</button>
        </div>
        <table class="layui-table" id="test" lay-filter="test"></table>
    </div>
    <div class="layui-col-md6">
            <%--实际申请表--%><h1>采购申请表</h1>
            <table class="layui-table" id="test1" lay-filter="test1"></table>
    </div>

</div>
<%--库存表表头栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container" >
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="createTable">添加采购</button>
    </div>
</script>

<%--采购申请表头栏--%>
<script type="text/html" id="toolbarDemo1">
      <div class="layui-btn-container" >
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
          <button class="layui-btn layui-btn-sm" lay-event="requestBook">申请采购</button>
      </div>
</script>

<!--采购申请表 数据表格右侧按钮组-->
    <script type="text/html" id="barDemo1">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>
    </script>

</body>
<script type="text/javascript">
    layui.use(['table','form','jquery','layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        $(function () {
            //当页面加载完成后执行的事件
            showTable();
            showTable1();
            aaa();
            //查看详情
            aaa1();
        });

        //页面加载完成后，填充书籍类型下拉框
        function aaa() {
            $.ajax({
                type:"get"
                ,url:'${pageContext.request.contextPath}/type/getAllType'
                ,dataType:'json'
                ,success:function (typeData) {
                    for(var i=0;i<typeData.length;i++){
                        $("#typeSelect").append(
                            $("<option>").attr("value",typeData[i].typeid).html(typeData[i].typename)
                        )
                    }
                    form.render('select','formData');
                }
            })
        }
       //页面加载完成后，填充书籍类型下拉框(查看详情)
        function aaa1() {
            $.ajax({
                type:"get"
                ,url:'${pageContext.request.contextPath}/type/getAllType'
                ,dataType:'json'
                ,success:function (typeData) {
                    for(var i=0;i<typeData.length;i++){
                        $("#typeSelect1").append(
                            $("<option>").attr("value",typeData[i].typeid).html(typeData[i].typename)
                        )
                    }
                    form.render('select','formData1');
                }
            })
        }

        //去重
        function delSame(points) {
            var result = [];
            var obj = {};
            for (var i = 0; i < points.length; i++) {
                if (!obj[points[i].bookid]) {
                    result.push(points[i]);
                    obj[points[i].bookid] = true;
                }
            }
            return result;
        }

        //加载库存表格
        function showTable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/book/getAllBook'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,totalRow: true
                ,title: '采购信息'
                ,data:dataAll
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'bookid', title:'ID', edit: 'text',totalRowText: '合计'}
                    ,{field:'bookname', title:'图书名称', unresize: true, sort: true}
                    ,{field:'author', title:'作者',sort: true }
                    ,{field:'typename', title:'图书类型', edit: 'text', sort: true}
                    ,{field:'count', title:'数量',  edit: 'text',sort: true, totalRow: true}
                    ,{field:'price', title:'进价',sort: true}
                    ,{field:'publisher', title:'出版社'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,15]
                ,text:{
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            });
        }

        //用于接收库存表的数据，向出库渲染
        var dataAll=[];

        //加载申请采购表
        function showTable1(){
            table.render({
                elem: '#test1'
               ,toolbar: '#toolbarDemo1' //开启头部工具栏，并为其绑定左侧模板
                ,totalRow: true
                ,title: '采购信息'
                ,data:dataAll
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'bookid', title:'ID', edit: 'text',totalRowText: '合计'}
                    ,{field:'bookname', title:'图书名称', unresize: true, sort: true}
                    ,{field:'author', title:'作者',sort: true }
                    ,{field:'typename', title:'图 书类型', edit: 'text', sort: true}
                    ,{field:'count', title:'数量',  edit: 'text',sort: true, totalRow: true}
                    ,{field:'price', title:'进价',sort: true}
                    ,{field:'publisher', title:'出版社'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo1'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,15]
                ,text:{
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            });
        }

        //搜索（计划采购）
        $("#search").click(function () {
            // alert("111")
            //执行重载
            table.reload('test',{
                page:{
                    curr:1//重新从第一页开始
                }
                ,where:{
                    bookname:$("#bookname").val()
                }
            },'data')
        });


        //库存表头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                    //申请采购
                case'createTable':
                    var checkData = checkStatus.data;
                    if(checkData.length>0){
                        for(var i = 0;i < checkStatus.data.length; i++){
                            dataAll.push(checkStatus.data[i]);
                        }
                        dataAll = delSame(dataAll);
                    }else {
                        layer.msg('选内容',{icon:5});
                    }
                    showTable1();
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //头工具栏事件  申请采购表
        table.on('toolbar(test1)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                //申请采购
                case 'requestBook':
                    var data = checkStatus.data;
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/request/insert',
                        data:JSON.stringify(data),
                        contentType:'application/json',
                        dataType: 'json',
                        success:function (datasu) {
                            if(datasu.code==1){
                                layer.closeAll();
                                //重载库存表
                                showTable();
                                dataAll=[];
                                //重载出库申请表
                                showTable1();
                                layer.msg(datasu.msg,{icon:1});
                            }else {
                                layer.msg(datasu.msg,{icon:5});
                            }
                        }
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件(申请采购)
        table.on('tool(test1)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.post('${pageContext.request.contextPath}/book/deleteRequest',{"id":data.id},function (delobj) {
                        if(delobj.code==1){
                            layer.msg(delobj.msg,{icon:1});
                            showTable();
                        }else {
                            layer.msg(delobj.msg,{icon:5});
                        }
                    },'json')
                    layer.closeAll();
                });
            }
        });

        /**
         * 监听表单提交
         */
        form.on('submit(*)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/insertBook',
                dataType: 'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result.code ==1 ){
                        layer.msg(result.msg, {icon: 1})
                        showTable1();
                    }else{
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            });
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</html>
